cart_data=[
    {'store_name':'ustb','img_url':'./img/1.jpg','good_detail':'TYPE-C母转圆口DC电源转接头','price':19.9,'count':1,'time':'2020.05.08 18:39:28'},
    {'store_name':'ustb','img_url':'./img/2.jpg','good_detail':'TYPE-C母转圆口DC电源转接头','price':9.9,'count':2,'time':'2020.02.08 18:39:28'},
    {'store_name':'ustb','img_url':'./img/3.jpg','good_detail':'TYPE-C母转圆口DC电源转接头','price':99.9,'count':1,'time':'2020.05.09 18:39:28'},
    {'store_name':'ustb','img_url':'./img/4.jpg','good_detail':'TYPE-C母转圆口DC电源转接头','price':12.9,'count':1,'time':'2020.01.08 18:39:28'},
    {'store_name':'ustb','img_url':'./img/5.jpg','good_detail':'TYPE-C母转圆口DC电源转接头','price':16.9,'count':1,'time':'2020.05.08 18:39:28'},
    {'store_name':'ustb','img_url':'./img/6.jpg','good_detail':'TYPE-C母转圆口DC电源转接头','price':54.9,'count':2,'time':'2020.03.08 18:39:28'},
    {'store_name':'ustb','img_url':'./img/7.jpg','good_detail':'TYPE-C母转圆口DC电源转接头','price':93.9,'count':1,'time':'2020.03.08 18:39:28'},
    {'store_name':'ustb','img_url':'./img/8.jpg','good_detail':'TYPE-C母转圆口DC电源转接头','price':124.9,'count':1,'time':'2020.03.04 18:39:28'},
]
$(document).ready(function(){
    //变量   
    var page=1;//当前页数
    var item_list=[]//初始化item、列表为空
    //#######################################################################################
    //-----事件函数区--------//
    //为单选框添加事件
    $("#price_sort").click(function () {
        sort_list(0)
        load_list(page);
    })
    $("#time_sort").click(function () {
        sort_list(1)
        load_list(page);
    })
    $("#select_all").click(function () {
        for (var i = 0; i < item_list.length; i++) {
            var temp = item_list[i].children(".checkbox_div").children()[0]
            temp.checked = true
        }
        load_list(page)
        $("#price_sum").text(Calculate())
    })
    $("#unselect_all").click(function () {
        for (var i = 0; i < item_list.length; i++) {
            var temp = item_list[i].children(".checkbox_div").children()[0]
            temp.checked = false
        }
        load_list(page)
        $("#price_sum").text(Calculate())
    })
    //为复选框添加事件
    $("#item_hover").on('click', '.item_checkbox', (function () {
        $("#price_sum").text(Calculate())
    }))
    //鼠标进入变色
    $("#item_hover").on('mouseover', '.item', function () {
        $(this).css('background-color', '#FF9933')
    })
    //鼠标离开变色
    $("#item_hover").on('mouseleave', '.item', function () {
        var oldcolor = $(this).data('oldcolor')
        console.log(oldcolor)
        $(this).css('background-color', oldcolor)
    })
    //+-1按钮功能
    $("#item_hover").on('click', '.btn-success', function () {
        if ($(this).data('op') == 1)
            $(this).siblings("textarea").val(parseInt($(this).siblings("textarea").val()) + 1)
        else {
            if (parseInt($(this).siblings("textarea").val()) > 1)
                $(this).siblings("textarea").val(parseInt($(this).siblings("textarea").val()) - 1)
        }
        $("#price_sum").text(Calculate())
    })
    //删除按钮
    $("#item_hover").on('click', '.btn-primary', function () {
        var number = $(this).parents(".item").attr('id')

        for (var i = 0; i < item_list.length; i++) {
            if (item_list[i][0] == $(this).parent().parent().parent()[0]) {
                item_list.splice(i, 1)
                console.log('find')
                console.log(item_list)
            }
        }
        load_list(page);
        $("#price_sum").text(Calculate())
    })

    //########################################################################################
    //----功能函数区----------//
    //对数据排序
    var sort_list = function (id) {
        if (id == 1) {
            item_list.sort(
                (a, b) => {
                    return (a.children(".time").text() < b.children(".time").text()) ? 1 : -1
                }
            )
        }
        else {
            item_list.sort(
                (a, b) => {
                    return (parseInt(a.children(".price_div").children(".price").text()) < parseInt(b.children(".price_div").children(".price").text())) ? 1 : -1
                }
            )
        }
    }
    //添加翻页按钮
    var add_page_button = function () {
        //获取当前页数
        current_page = (window.parent.location.href.split("=").length == 1) ? 1 : window.parent.location.href.split("=")[1]
        page = current_page
        //计算所需页数
        var page_sum = (cart_data.length % 4) ? cart_data.length / 4 + 1 : cart_data.length / 4
        //动态添加翻页按钮
        page_button_list = []
        for (var i = 0; i < page_sum; i++) {
            var new_li = $("<li class='page_button' data-id='" + (i + 1) + "'><a href='#page=" + (i + 1) + "'>" + (i + 1) + "</a></li>")
            $('#paper').append(new_li)
            page_button_list.push(new_li)
        }
        page_button_list[page - 1].addClass('active')
        $("#paper").on('click', '.page_button', function () {
            $(this).addClass('active')
            for (var i = 0; i < page_button_list.length; i++) {
                if ($(this).data('id') != page_button_list[i].data('id')) {
                    page_button_list[i].attr('class', 'page_button')
                }
            }
            page = $(this).data('id')
            load_list(page);
        })
    }
    //初始化所有item，添加到list
    var init_item = function () {
        item_list.push($("#item"))
        for (var i = 0; i < cart_data.length; i = i + 1) {
            var item_clone = item_list[0].clone(true)
            item_clone.children(".store_name").text(cart_data[i]['store_name'])
            item_clone.children(".goods_div").children().prop('src', cart_data[i]['img_url'])
            item_clone.children(".good_detail").text(cart_data[i]['good_detail'])
            item_clone.children(".time").text(cart_data[i]['time'])
            item_clone.children(".price_div").children(".price").text(cart_data[i]['price'])
            item_clone.children(".price_div").children("div").children("textarea").val(cart_data[i]['count'])
            item_clone.prop('id', i);

            item_list.push(item_clone)
        }
        item_list[0].remove()
        item_list.splice(0, 1)
        sort_list(1)
        for (var i = (page - 1) * 4; i < page * 4 && i < cart_data.length; i = i + 1) {
            var item_clone = item_list[i]
            $("#item_hover").append(item_clone);
        }
    }
    //显式指定范围的item
    var load_list = function (current_page) {
        //删除现有所有item
        $("#item_hover").empty();
        //初始化颜色
        for (var i = 0; i < item_list.length; i++) {
            item_list[i].css('background-color', 'white')
        }
        //显示指定页数的数据
        for (var i = (current_page - 1) * 4; i < current_page * 4 && i < item_list.length; i = i + 1) {
            var item_clone = item_list[i]
            if (i % 2 == 0) {
                item_clone.css('background-color', '#CCFF99')
                item_clone.data('oldcolor', '#CCFF99')
            }
            else {
                item_clone.data('oldcolor', 'white')
            }
            $("#item_hover").append(item_clone);
        }
    }
    //计算总价函数
    var Calculate = function () {
        var sum = 0
        //获取所有勾选的item
        var checked_list = []
        for (var i = 0; i < item_list.length; i++) {
            if (item_list[i].children(".checkbox_div").children()[0].checked)
                checked_list.push(item_list[i])
        }
        for (var i = 0; i < checked_list.length; i++) {
            sum = sum + (parseFloat(checked_list[i].children(".price_div").children(".price").text()) * parseFloat(checked_list[i].children(".price_div").children("div").children("textarea").val()))
        }
        return sum.toFixed(2)
    }
    //############################################################################################
    //----函数执行区---//
    //初始化所有item属性
    init_item()
    //加载列表第一页
    load_list(1)
    //添加翻页按钮
    add_page_button();
    //显初始的总价
    $("#price_sum").text(Calculate())
})